<template>
  <div class="page">
    <div class="list">
      <el-card class="box-11">
        <div calss="filler">
          <div class="title12"><h3>备案公司</h3></div>
        </div>
      </el-card>
      <div class="all">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="selection" width="50" />
          <el-table-column
            prop="createTime"
            label="立项时间"
            width="200"
            sortable
          />
          <el-table-column prop="type" label="影片类别" width="200" />
          <el-table-column prop="filmName" label="影片名称" width="200" />
          <el-table-column prop="companyName" label="备案公司" width="350" />
          <el-table-column prop="scriptwriter" label="编剧" width="250" />
        </el-table>
        <div class="selectpage">
          <div class="bd"></div>
          <div class="fy">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :background="true"
              layout="prev, pager, next,jumper"
              :total="500"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      pageInfo: {}, //分页信息对象
      pageSize: 20, //当前页条数
      currentPage: 1, //当前页号
    };
  },
  methods: {
    handleSizeChange(pageSize) {
      //选择每一页记录数
      this.pageSize = pageSize;
      this.getPageData(this.currentPage, this.pageSize);
      console.log("size:", pageSize);
    },
    handleCurrentChange(pageNum) {
      //切换页号得到当前页码
      this.currentPage = pageNum;
      this.getPageData(this.currentPage, this.pageSize);
      console.log("num:", pageNum);
    },
    getPageData(num, size) {
      //获取分页数据
      let params = { pageNum: num, pageSize: size };
      console.log("请求参数：", params); // 打印请求参数
      this.$http.get("/filling/v1/companyInfo", { params }).then((response) => {
        console.log(response.data);
        this.pageInfo = response.data;
        this.tableData = this.pageInfo;
      });
    },
  },
  mounted() {
    this.getPageData(1, 20);
  },
};
</script>

<style scoped>
.page {
  background-color: rgb(230, 229, 229);
  overflow: auto;
  width: 100%;
}
.list {
  overflow: auto;
  width: 100%;
}
.all {
  width: 98%;
  margin-left: 14px;
  margin-top: 10px;
}
.selectpage {
  width: 98%;
  height: 70px;
  background-color: white;
}
.fy {
  margin-left: 240px;
}
.bd {
  width: 1030px;
  height: 30px;
  background-color: white;
}
</style>